<template>
	<view class="phone-header" :style="{ color: titleColor, background: bgColor, padding: '0 ' + isLeftAndRight }">
		<!-- 左icon或者logo图片 -->
		<template v-if="logoImage">
			<image :src="logoImage" mode="widthFix"  @tap="tapLeft()"></image>
		</template>
		<template v-else>
			<view :class="['header-item' , 'iconfont' , leftIconName]"
				:style="{fontSize: isIconFontSize }"
				 @tap="tapLeft()"
			>
			</view>
		</template>
		<!-- 标题 -->
		<view class="header-item title"
			:style="{ fontSize: isTitleFontSize, fontWeight: titleFontWeight }"
		>{{title}}</view>
		<!-- 右icon -->
		<view :class="['header-item' , 'iconfont' , {rightShow: isrightHide} ,rightIconName]"
			:style="{fontSize: isIconFontSize}"
			@tap="tapRight()"
		></view>
	</view>
</template>

<script>
export default {
	name: "phoneHeader",
	data() {
		return {
		}
	},
	props: {
		title: {
			default: "this is header"
		},
		titleFontSize: {
			type: Number,
			default: 32
		},
		titleFontWeight: {
			default: 700
		},
		iconFontSize: {
			type: Number,
			default: 48
		},
		leftIconName: {
			default: "icon-fanhui"
		},
		rightIconName: {
			default: "icon-sousuo"
		},
		logoImage: {
			default: ""
		},
		titleColor: {
			default: "#333333"
		},
		bgColor: {
			default: "#ffffff"
		},
		leftAndRight: {
			type: Number,
			default: 50
		},
		isrightHide: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		tapRight() {
			this.$emit('tapRight')
		},
		tapLeft() {
			if(this.logoImage) {
				this.$emit('tapLeft')
			} else {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	},
	computed: {
		isIconFontSize() {
			return uni.upx2px(this.iconFontSize) + 'px'
		},
		isLeftAndRight() {
			return uni.upx2px(this.leftAndRight) + 'px'
		},
		isTitleFontSize() {
			return uni.upx2px(this.titleFontSize) + 'px'
		}
	},
}
</script>

<style lang="scss">
	@import './iconfont/iconfont.css';
	
	.phone-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90upx;
		line-height: 90upx;
		image {
			width: 100upx;
		}
		.rightShow {
			opacity: 0;
		}
	}
</style>
